*{
	padding:0;
	margin: 0;
}

.tools-pannel{
	display: flex;
	width: 750px;
	justify-content: space-between;
	background: rgb(31,33,35);
	border-radius: 20px;
	padding: 20px;
	box-sizing: border-box;
	&-item{
		text-align: center;
		
		.icon{
			display: flex;
			justify-content: center;
			align-items: center;
			width:120px;
			height: 120px;
			border: 1px solid rgb(51,53,55);
			border-radius:50%;
			margin-bottom: 20px;
			transition: all .3s;
			&-pic{
				display: block;
				width:50px;
				height: 50px;
			}
		}
		&:hover{
			.name{
				transform: rotateX(90deg);
			}
			.icon{
				background: rgb(51,53,55);
			}
		}
	}
	
	.name{
		position: relative;
		display: flex;
		flex-direction: column;
		text-align: center;
		font-size: 28px;
		color: #fff;
		transition:all .3s;
		transform-style: preserve-3d;
		transform-origin:center center -20px;
		backface-visibility: hidden;
		&-front{
			display: block;
			width: 120px;
			height: 40px;
		}
		&-back{
			position: absolute;
			left: 0;
			top: 40px;
			width: 120px;
			height: 40px;
			display: block;
			transform-origin: center top;
			transform: rotateX(-90deg);
		}
	}
}